<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backHandle($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            联系人
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-fab class="search" top center>
        <button ion-fab>
            <div class="search-key-wrapper">
                <input (keyup)="inputKeyUp($event)" [(ngModel)]="searchKeyword"
                       type="text" placeholder="姓名/电话">
                <i (click)="searchHandle($event)"></i>
            </div>
        </button>
    </ion-fab>

    <div id="contactWrapper" class="contact-wrapper">
        <div *ngIf="(!currentPageContact.list || currentPageContact.list.length === 0) && isLoaded" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <ion-list id="contentArea" class="container" [ngStyle]="{height:totalHeight+'px'}">

            <div class="client-item"
                 (click)="item.itemType === 1?goToClientDetail(item):null"
                 *ngFor="let item of currentPageContact.list"
                 [ngStyle]="item.style"
                 [ngClass]="{'group':item.itemType == 0}">

                <!--<img class="avatar" alt="" *ngIf="item.itemType == 1"-->
                     <!--[src]="item.avatar"/>-->

                <div class="client-title">
                    {{item.title}}
                </div>

                <div *ngIf="item.vipFlag != null && item.vipFlag != '' && item.vipFlag != undefined"
                     class="vip" [ngClass]="'level'+item.vipFlag">
                </div>

            </div>


        </ion-list>

    </div>

    <ion-fab bottom center class="tool-contact">
        <button ion-fab class="tool-bar-contact">
            <button class="favorite" ion-button (click)="goFavoritedList()">
                <i></i>
                收藏夹
            </button>
            <button class="add-client" ion-button (click)="clientAddHandle($event)">
                <i></i>
                添加客户
            </button>
            <button class="import" ion-button (click)="goImportContacts($event)">
                <i></i>
                导入手机通讯录
            </button>
        </button>
    </ion-fab>

    <ion-fab class="contact-index">
        <button ion-fab class="contact-list-index">
            <span class="contact-list-item"
                  [ngClass]="{'current':alpha.isCurrent}"
                  *ngFor="let alpha of alphas">
                {{alpha.v}}
            </span>
        </button>
    </ion-fab>

</ion-content>


